DevelopersIO内をキーワード検索できるGoogle拡張機能を作ってみた

DevelopersIOサイト内を検索できるChrome拡張機能を作ってみました。多少のHTMLとJavaScriptの知識があれば、意外に簡単に作れるようです。作成した拡張機能はchromeウェブストアで「DevelopersIO_Search」の名称で公開していますので、ぜひお試しください。

土肥淳子

2021.03.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

クラスメソッド広報担当の土肥です。

仕事柄、「あのパートナーさんの製品、誰かがブログ書いてなかったっけ」とか、「〜〜さんが以前、リモートワークについて記事にしてなかったっけ」なんて日々DevelopersIOを検索していたりします。

ところが皆さま、お気づきでしたでしょうか？いつの間にかDevelopersIOのサイト内検索ボックスが消えていることに。

編集長に確認したところ、「精度が悪いから無くした」とのことでした。

仕方なくGoogleのサイト内検索を利用していたのですが、都度都度 site:https://dev.classmethod.jp/ {検索キーワード} を入力するのも面倒になったので、同じことをできるChrome拡張機能を作ってみることにしました。
ないなら作る！

Chrome拡張機能の作り方はGoogleのドキュメントや、下記のサイトを参考にさせていただきました。

今回は検索キーワードの入力ポップアップと、サイト内検索ページの表示までを作ってみています。
調子に乗ってchromeウェブストアで公開してみたので、動作はこちらでお試しください。

Chrome拡張機能の構成と開発準備

検索ボックスと画面遷移の動作だけを作る場合、下記のファイルが必要になります。

manifest.json : 本体。拡張機能の概要や、アイコンがクリックされた時に読み込むファイルなどを指定します。
popup.html : アイコンクリック後に表示させる画面です。今回は検索ボックスだけのシンプルなものにしています。
popup.js : popup.htmlに入力された値を受け取ってからの動作を指定してます。
アイコン : 拡張機能の呼び出し用に、ブラウザに表示させる128px x 128pxの画像ファイルです。

さらに拡張機能のページでデベロッパーモードをオンに。

manifest.jsonとアイコンなど、最低限をそろえて読み込ませると、自作の拡張機能のカードが追加されます。ファイル修正後はカードの矢印マークをクリックして再読み込みさせることで、動作を確認することができるようになります。

manifest.json

拡張機能のメインになる部分です。

iconsは参照元にしたがって32px〜128pxまで用意しましたが、128pxだけでも良かったかもしれません。versionはこの自作拡張アプリのバージョン情報なので、とりあえず1.0に。manifest_versionはchromeの指定のまま、2にしています。

browser_actionではアイコンクリック時に呼び出すhtmlファイルを指定。

{
  "name": "DevelopersIO_Search",
  "version": "1.0",
  "manifest_version": 2,
  "description": "DevelopersIOのサイト内検索を行うための検索ボックスです。Googleサイト内検索結果を別タブで表示します。",
  "icons": {
        "32": "icon_32.png",
        "48": "icon_48.png",
        "128": "icon_128.png"
      },
"browser_action": {
    "default_icon": {
      "16": "developersio.png"
    },
    "default_popup": "popup.html"
    }
  }

キーワード入力ができる検索ボックスだけ用意できれば良いので、こちらはごくシンプルに。

最後にpopup.jsを読み込ませています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
    <script src="jquery-3.6.0.min.js"></script>
    <style>
      body {
        width: 200px;
      }
    </style>
  </head>
  <body>
	<label for="name">DevelopersIOで検索する！</label>
  	<input type="text" id="searchbox" size="20" autofocus>
    <input type="submit" id="btn" value="検索">
    <script src="popup.js"></script>
  </body>
</html>

検索ボックスへの入力を読み取って、別タブで検索結果を開くだけです。

  $("#btn").on("click", () => {
      var searchkey=document.getElementById("searchbox").value;
      window.open('https://google.com/search?q=site%3A'+'https://dev.classmethod.jp/ '+searchkey);
  });

シンプルなのですが、実はここでちょっと詰まりました。

当初、window.open()では、Google検索ページを開くだけにして、Google検索ページの入力ボックスをIDで指定して document.getElementByIdを使って入力操作しようとしていたのですが、うまく動きませんでした。

そこで、エンジニアぽくない解決方法で臨んでみました。そもそも私、エンジニアではないですし。

雑ですがwindow.open()で渡すURLに検索キーワードまで含めてしまうことにしました。chromeのURL欄に同文を打ち込むのと同じ挙動になるはずと思っています。